<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农谚分类系统-完整版</title>
    <script src="./js/echarts.min.js"></script>
    <style>
        /* 背景样式 */
        body {
            background: #e3e1e4f8 url('./img/背景图（农谚）.png') no-repeat center center fixed;
            background-size: cover;
            height: 100%;
            font-family: 'Consolas', monospace;
            padding-top: 64px;
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(46, 39, 51, 0.65);
            z-index: -1;
        }

        /* 统一的导航栏样式 */
        .main-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: rgba(255, 250, 240, 0.85);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            align-items: center;
            padding: 0 40px;
            backdrop-filter: blur(6px);
            border-bottom: 1px solid rgba(212, 180, 131, 0.5);
        }

        .nav-buttons {
            display: flex;
            gap: 25px;
            margin-left: auto;
        }

        .nav-button {
            padding: 12px 28px;
            border-radius: 6px;
            background: transparent;
            color: #4A4A4A;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(74, 74, 74, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(8px);
        }

        .nav-button:hover {
            background: rgba(74, 74, 74, 0.1);
            color: #4A4A4A;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 主容器 */
        .container {
            display: flex;
            height: calc(100vh - 64px);
            padding: 20px;
            gap: 20px;
        }

        #chart-container {
            flex: 1;
            background: rgba(58, 50, 65, 0);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        /* 右侧面板 */
        .right-panel {
            width: 400px;
            background: rgba(58, 50, 65, 0.35);
            border-radius: 8px;
            padding: 15px;
            position: relative;
        }

        /* 搜索框 */
        .search-box {
            margin-bottom: 15px;
            position: relative;
        }

        #searchInput {
            width: 100%;
            padding: 12px 40px 12px 20px;
            background: #5F566D;
            border: 2px solid #6DA65D;
            color: #E0DCE5;
            border-radius: 30px;
            font-family: 'Consolas', monospace;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        #searchInput::placeholder {
            color: #A89EB5;
            opacity: 0.8;
        }

        #searchInput:focus {
            border-color: #8BC34A;
            outline: none;
            box-shadow: 0 4px 12px rgba(139, 195, 74, 0.2);
        }

        .search-box::after {
            content: "🔍";
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.8;
            pointer-events: none;
            filter: grayscale(100%);
            transition: opacity 0.3s;
        }

        /* 谚语列表 */
        .proverb-list {
            height: calc(100% - 60px);
            overflow: hidden;
            /* 初始状态不允许滚动 */
            padding-right: 10px;
        }

        .proverb-list.scrollable {
            overflow-y: auto;
            /* 允许滚动时启用滚动条 */
        }

        .scroll-content {
            padding: 10px 0;
            transition: transform 0.5s ease;
        }

        /* 自定义滚动条样式 */
        .proverb-list::-webkit-scrollbar {
            width: 8px;
        }

        .proverb-list::-webkit-scrollbar-track {
            background: rgba(58, 50, 65, 0.3);
            border-radius: 4px;
        }

        .proverb-list::-webkit-scrollbar-thumb {
            background: #6DA65D;
            border-radius: 4px;
        }

        .proverb-list::-webkit-scrollbar-thumb:hover {
            background: #8BC34A;
        }

        .proverb-item {
            padding: 12px;
            margin: 8px 0;
            background: #6DA65D;
            border-radius: 6px;
            color: #E0DCE5;
            cursor: pointer;
            transition: transform 0.3s;
            min-height: 100px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .proverb-text {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 5px;
            line-height: 1.3;
        }

        .proverb-desc {
            font-size: 12px;
            color: #E0DCE5;
            opacity: 0.9;
            line-height: 1.4;
            margin: 8px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }

        .proverb-category {
            font-size: 11px;
            color: #A89EB5;
            margin-top: auto;
            padding-top: 4px;
            border-top: 1px dashed rgba(168, 158, 181, 0.3);
        }

        .proverb-item:hover {
            transform: translateX(10px);
            background: #7dbd6d;
        }

        /* 详情面板 */
        .proverb-detail-panel {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #4A4250;
            z-index: 100;
            padding: 20px;
            border-radius: 8px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }

        .proverb-detail-panel.active {
            opacity: 1;
            transform: translateY(0);
            display: block;
        }

        .detail-content {
            background: #5F566D;
            padding: 20px;
            border-radius: 8px;
            height: calc(100% - 40px);
            color: #E0DCE5;
            position: relative;
        }

        .close-button {
            background: #ff5555;
            border: none;
            color: white;
            font-size: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }

        .close-button:hover {
            background: #ff4444;
        }
    </style>
</head>

<body>
    <nav class="main-nav">
        <div class="nav-buttons">
            <button class="nav-button" onclick="window.location.href='../1界面.html'">二十四节气</button>
        </div>
    </nav>

    <div class="container">
        <div id="chart-container"></div>
        <div class="right-panel">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入农谚或标签...">
            </div>
            <div class="proverb-list">
                <div class="scroll-content" id="scrollContent"></div>
            </div>
            <div id="proverb-detail-panel" class="proverb-detail-panel">
                <div class="detail-content">
                    <h3>谚语详细解释</h3>
                    <p id="proverb-desc"></p>
                    <button id="close-detail" class="close-button">×</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const DataManager = {
            items: [],
            async init() {
                const response = await fetch('./data/proverbs.json');
                const rawData = await response.json();
                const sanitize = (node) => {
                    const { parent, ...rest } = node;
                    if (rest.children) rest.children = rest.children.map(sanitize);
                    return rest;
                };
                const fullData = rawData.map(sanitize);
                this.processData(fullData);
                return fullData;
            },
            processData(fullData) {
                const queue = [...fullData];
                while (queue.length) {
                    const node = queue.shift();
                    if (node.children) {
                        queue.push(...node.children);
                    } else {
                        this.items.push({
                            text: node.name,
                            desc: node.desc || '传统农事经验总结',
                            category: this.getCategoryPath(node),
                            tags: node.tags || [] // 新增标签字段
                        });
                    }
                }
            },
            getCategoryPath(node) {
                const path = [];
                let current = node;
                while (current) {
                    path.unshift(current.name);
                    current = current.parent;
                }
                return path.slice(0, -1).join(' > ');
            },
            search(keyword) {
                const lowerKeyword = keyword.toLowerCase();
                return this.items.filter(item =>
                    item.text.toLowerCase().includes(lowerKeyword) ||
                    item.category.toLowerCase().includes(lowerKeyword) ||
                    item.tags.some(tag => tag.toLowerCase().includes(lowerKeyword)) // 标签搜索
                );
            }
        };

        class AutoScroller {
            constructor(container) {
                this.container = container;
                this.content = container.querySelector('#scrollContent');
                this.position = 0;
                this.speed = 0.5;
                this.isScrolling = false;
                this.rafId = null;
                this.updateDimensions();
            }

            updateDimensions() {
                this.contentHeight = this.content.scrollHeight;
                this.containerHeight = this.container.clientHeight;
            }

            start() {
                if (this.isScrolling) return;
                this.isScrolling = true;
                this.scroll();
            }

            stop() {
                this.isScrolling = false;
                cancelAnimationFrame(this.rafId);
            }

            reset() {
                this.position = 0;
                this.content.style.transform = 'translateY(0)';
                this.updateDimensions();
            }

            scroll() {
                if (!this.isScrolling) return;
                this.updateDimensions();

                if (this.contentHeight > this.containerHeight) {
                    this.position -= this.speed;
                    if (-this.position >= this.contentHeight) {
                        this.position = this.containerHeight;
                    }
                    this.content.style.transform = `translateY(${this.position}px)`;
                    this.rafId = requestAnimationFrame(() => this.scroll());
                }
            }
        }

        function initChart(data) {
            const chart = echarts.init(document.getElementById('chart-container'));
            chart.setOption({
                series: [{
                    type: 'sunburst',
                    data: data,
                    radius: [0, '90%'],
                    label: {
                        rotate: 'radial',
                        fontSize: 10,
                        color: '#E0DCE5',
                        formatter: function (params) {
                            // 根据层级设置不同的显示方式
                            if (params.treePathInfo.length === 1) {
                                // 第一层（季节）：显示完整名称
                                return params.name;
                            } else if (params.treePathInfo.length === 2) {
                                // 第二层（月份）：显示完整名称
                                return params.name;
                            } else {
                                // 第三层（谚语）：只显示第一个字
                                return params.name.charAt(0);
                            }
                        },
                        position: 'outside',
                        align: 'center',
                        verticalAlign: 'middle',
                        padding: [0, 3],
                        backgroundColor: 'rgba(58, 50, 65, 0.7)',
                        borderRadius: 4
                    },
                    levels: [
                        {
                            itemStyle: {
                                color: '#6DA65D',
                                borderWidth: 2,
                                borderColor: '#2E2733'
                            },
                            r0: '0%',
                            r: '25%',
                            label: {
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        },
                        {
                            itemStyle: {
                                color: '#4A4250',
                                borderWidth: 2,
                                borderColor: '#2E2733'
                            },
                            r0: '25%',
                            r: '55%',
                            label: {
                                fontSize: 12
                            }
                        },
                        {
                            itemStyle: {
                                color: '#5F566D',
                                borderWidth: 2,
                                borderColor: '#2E2733'
                            },
                            r0: '55%',
                            r: '90%',
                            label: {
                                fontSize: 10
                            }
                        }
                    ],
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#2E2733'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        label: {
                            show: true,
                            fontSize: 14,
                            backgroundColor: 'rgba(58, 50, 65, 0.9)'
                        }
                    },
                    highlightPolicy: 'ancestor',
                    downplay: {
                        label: {
                            opacity: 0.5
                        }
                    },
                    nodeClick: 'rootToNode',
                    sort: function (a, b) {
                        return b.value - a.value;
                    }
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (params.treePathInfo.length === 3) {
                            return `${params.name}<br/>${params.data.desc || '暂无详细解释'}`;
                        }
                        return params.name;
                    }
                }
            });
            return chart;
        }

        document.addEventListener('DOMContentLoaded', async () => {
            const fullData = await DataManager.init();
            let currentItems = DataManager.items;
            let refreshInterval = null;
            let searchTimer = null;
            let isAutoScrolling = true;
            let scrollPosition = 0;

            const chart = initChart(fullData);
            const proverbList = document.querySelector('.proverb-list');
            const scrollContent = document.getElementById('scrollContent');

            // 自动滚动函数
            function autoScroll() {
                if (!isAutoScrolling) return;

                const containerHeight = proverbList.clientHeight;
                const contentHeight = scrollContent.scrollHeight;

                if (contentHeight > containerHeight) {
                    scrollPosition -= 1;
                    if (-scrollPosition >= contentHeight) {
                        scrollPosition = containerHeight;
                    }
                    scrollContent.style.transform = `translateY(${scrollPosition}px)`;
                    requestAnimationFrame(autoScroll);
                }
            }

            // 更新谚语列表显示
            function updateProverbList(items, autoScroll = false) {
                const html = items.length ? items.map(item => `
                    <div class="proverb-item" 
                         data-text="${item.text}" 
                         data-desc="${item.desc}">
                        <div class="proverb-text">${item.text}</div>
                        <div class="proverb-desc">${item.desc}</div>
                        <div class="proverb-category">${item.category}</div>
                    </div>
                `).join('') : '<div class="proverb-item">无匹配结果</div>';

                scrollContent.innerHTML = html;
                scrollPosition = 0;
                scrollContent.style.transform = 'translateY(0)';

                if (autoScroll) {
                    isAutoScrolling = true;
                    proverbList.classList.remove('scrollable');
                    autoScroll();
                } else {
                    isAutoScrolling = false;
                    proverbList.classList.add('scrollable');
                }
            }

            // 点击事件处理
            chart.on('click', (params) => {
                if (params.treePathInfo) {
                    const searchText = params.name;
                    document.getElementById('searchInput').value = searchText;

                    currentItems = DataManager.search(searchText);

                    // 如果点击的是最底层的节点（农谚本身）
                    if (params.treePathInfo.length === 3) {
                        const proverbItem = currentItems[0];
                        if (proverbItem) {
                            // 直接显示详细信息
                            document.querySelector('.search-box').style.display = 'none';
                            document.querySelector('.proverb-list').style.display = 'none';
                            document.getElementById('proverb-detail-panel').classList.add('active');
                            document.getElementById('proverb-desc').textContent = proverbItem.desc || '暂无详细解释';
                            isAutoScrolling = false;
                        }
                    } else {
                        // 如果不是最底层节点，显示该分类下的所有谚语
                        document.querySelector('.search-box').style.display = 'block';
                        document.querySelector('.proverb-list').style.display = 'block';
                        document.getElementById('proverb-detail-panel').classList.remove('active');
                        updateProverbList(currentItems, false); // 不自动滚动，允许手动滚动
                    }
                }
            });

            // 点击农谚条显示详细信息
            document.getElementById('scrollContent').addEventListener('click', (e) => {
                const item = e.target.closest('.proverb-item');
                if (item) {
                    document.querySelector('.search-box').style.display = 'none';
                    document.querySelector('.proverb-list').style.display = 'none';
                    document.getElementById('proverb-detail-panel').classList.add('active');
                    document.getElementById('proverb-desc').textContent = item.dataset.desc || '暂无详细解释';
                    isAutoScrolling = false;
                }
            });

            // 搜索框输入事件
            document.getElementById('searchInput').addEventListener('input', function (e) {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => {
                    const keyword = e.target.value.trim();

                    if (keyword) {
                        currentItems = DataManager.search(keyword);
                        updateProverbList(currentItems, false); // 搜索时不自动滚动
                    } else {
                        currentItems = DataManager.items;
                        updateProverbList(currentItems, true); // 清空搜索时恢复自动滚动
                    }
                }, 300);
            });

            // 关闭详情面板时恢复自动滚动
            document.getElementById('close-detail').addEventListener('click', () => {
                document.getElementById('proverb-detail-panel').classList.remove('active');
                document.querySelector('.search-box').style.display = 'block';
                document.querySelector('.proverb-list').style.display = 'block';

                if (!document.getElementById('searchInput').value) {
                    updateProverbList(currentItems, true);
                }
            });

            // 初始状态：显示随机谚语并自动滚动
            updateProverbList(currentItems, true);
        });
    </script>
</body>

</html>